<template>
    <div class="label-textarea">
        <slot></slot>
        <div class="label-style">{{labelName}}</div>
        <div class="input-style">
            <a-textarea v-model:value="refInputValue" show-count :maxlength="100" allow-clear
                @change="handleChange(refInputValue)" :style="'width:' + inputWidth +'px;' + 'Height:' + inputHeight + 'px;'"
                :disabled="isDisabled" />
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'LabelTextarea'
}
</script>
<script lang="ts" setup>
import { computed, ref, toRef, watch } from 'vue';
const props = defineProps({
    labelName: String,
    inputValue: String,
    inputWidth: {
        type: Number,
        default: 100,
    },
    inputHeight: {
        type: Number,
        default: 100,
    },
    isDisabled: {
        type: Boolean,
        default: false
    }
});

const  refInputValue = ref(props.inputValue);

const emits = defineEmits(['update:inputValue'])
// 需要传递的值
const handleChange = (value: any) => {
    console.log('输入的值', refInputValue.value);
    console.log('改变的值', value)
    emits('update:inputValue', refInputValue.value);
}
watch(() => [props.inputValue], () => {
    refInputValue.value = props.inputValue;
})
</script>
<style lang="less" scoped>
.label-textarea {
    display: flex;

    .input-style {
        margin-left: 10px;
    }
}
:deep(.ant-input-affix-wrapper){
    height: 100%;
}
</style>